<template>
  <div class="container">
    <div class="plan-details-outerbox">
      <div class="plan-details-header">
        <div class="header-icon-title">
          <img class="header-icon" :src="planTitleLists[5]" alt="">
          <span class="header-title">{{clickLabel}}</span>
        </div>
        <div class="header-right-sunheading">
          <p>
            <span>{{planTitleLists[0]}}</span>&nbsp;期&nbsp;{{planTitleLists[2]}}&nbsp;【
            <span>{{planTitleLists[1]}}</span>】&nbsp;第&nbsp;
            <span>{{planTitleLists[3]}}</span>&nbsp;期&nbsp;等待&nbsp;
            <span>{{planTitleLists[4]}}</span>&nbsp;期</p>
        </div>
      </div>
      <div class="plan-details-table">
        <div class="plan-details-intro">
          <p>说明：我们
            <span>3期一个计划</span>，计划中奖则更新计划，3期不中也更新计划；网页自动更新计划，用户无需手动刷新。</p>
        </div>
        <PlanTable v-if="this.$store.state.lotteryType !== 'pk10' && this.$store.state.lotteryType !== 'l28'" :tableLists="parentTableLists"></PlanTable>
        <PlanTableBj v-if="this.$store.state.lotteryType == 'pk10'" :tableLists="parentTableLists"></PlanTableBj>
        <PlanTablePc v-if="this.$store.state.lotteryType == 'l28'" :tableLists="parentTableLists"></PlanTablePc>
      </div>
    </div>
  </div>
</template>

<script>
import PlanTable from "./PlanTable";
import PlanTableBj from "../../bj10/PlanTableBj";
import PlanTablePc from "../../jndpc/PlanTablePc";

export default {
  components: {
    PlanTable,
    PlanTableBj,
    PlanTablePc
  },
  props: {
    caizhongID: {
      type: String
    },
    planClickIndex: {
      type: Array
    }
  },
  data() {
    return {
      sscHisLists: [],
      clickLabel: "个位计划",
      parentTableLists: [],
      planTitleLists: {},
      labelID: null,
      yctjDataList: null
    };
  },
  mounted() {
    this.axios
      .all([this.getPlanDefault()])
      .then(
        this.axios.spread(planLists => {
          if (planLists.data.status) {
            this.planTitleLists = planLists.data.data.plan;
            this.parentTableLists = planLists.data.data.list;
          } else {
            this.log(planLists.data.message);
          }
        })
      )
      .catch(err => {
        this.log(err);
      });
  },
  created() {
    // console.log(this.planClickIndex)
    if (this.planClickIndex == null) {
      return;
    } else {
      this.labelID = this.planClickIndex[0];
      this.clickLabel = this.planClickIndex[1];
    }
    this.getparentTableList();
  },
  watch: {
    planClickIndex() {
      this.labelID = this.planClickIndex[0];
      this.clickLabel = this.planClickIndex[1];
      this.getparentTableList();
    },
    getForecast: function(res) {
      // 如果推送回来数据与路由彩种id相同，否则不操作数据
      if (res.lottery_id == this.$route.params.caizhongID) {
        res.data.forEach((el, i) => {
          if (el.label_id == this.labelID) {
            this.yctjDataList = el.data;
          }
        });
        // 推送回来的期数不等于页面原有期数，做数据更新
        // 表格更新逻辑，清除先前表数据第一条，插入新推送数据两条；
        if (this.winningphasenum != this.yctjDataList[0].winningphasenum) {
          this.winningphasenum = this.yctjDataList[0].winningphasenum;
          this.parentTableLists.shift();
          // this.log("shift>>>", this.yctjDataList);
          for (let i = this.yctjDataList.length - 1; i >= 0; i--) {
            this.parentTableLists.unshift(this.yctjDataList[i]);
          }
          // this.log("unshift>>>", this.parentTableLists);
        }
      }
    }
  },
  methods: {
    //获取预测数据
    getparentTableList() {
      this.axios
        .get("forecast/getObtainForecastListById", {
          params: {
            lottery_id: this.$route.params.caizhongID,
            label_id: this.labelID
            // limit:3
          }
        })
        .then(res => {
          // console.log(res.data);
          if (res.data.status) {
            this.parentTableLists = res.data.data.list;
            this.planTitleLists = res.data.data.plan;
          } else {
            this.log(res.data.message);
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    getPlanDefault() {
      return this.axios.get("forecast/getObtainForecastListById", {
        params: {
          lottery_id: this.$route.params.caizhongID,
          label_id: this.labelID
        }
      }); //labelID是用户具体点击的哪个标签的ID
    }
  },
  computed: {
    getForecast() {
      return this.$store.state.Forecast;
    }
  }
};
</script>

<style lang="less">
@import url(../../../assets/css/forecastplan.less);
// @import url(../../../assets/css/plantablebj.less);
// @import url(../../../assets/css/forplantablebj.less);
</style>

